<template>
  <el-dialog
    title="收货地址"
    :visible.sync="showEditDialog"
    :close-on-click-modal="false"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      style="width: 60%; margin: 0px auto"
      on-submit="return false;"
    >
      <el-form-item label="姓名" prop="receiverName">
        <el-input v-model="ruleForm.receiverName" />
      </el-form-item>

      <el-form-item label="电话" prop="receiverMobile">
        <el-input v-model="ruleForm.receiverMobile" />
      </el-form-item>

      <el-form-item label="地址">
        <div id="app">
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </div>
      </el-form-item>

      <el-form-item label="详细地址" prop="addr">
        <el-input v-model="ruleForm.addr" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="sureBtnLoading" @click="establish">
          创建
        </el-button>
        <el-button style="margin-left: 300px" @click="showEditDialog = false">
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { regionDataPlus, CodeToText } from "element-china-area-data";
import http from "@/utils/request";
export default {
  props: ["user"],
  data() {
    return {
      ruleForm: {
        receiverName: "",
        receiverMobile: "",
        addr: "",
      },
      area: [],
      options: regionDataPlus,
      sureBtnLoading: false,
      selectedOptions: [],
      showEditDialog: false,
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 6, message: "长度在 1 到 6 个字符", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            required: true,
            pattern:
              /^((13|15|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    handleChange(val) {
      window.console.log(val)
      this.area = val;
    },
    establish() {
      let v = this.area.map((v) => CodeToText[v]);
      window.console.log(v);
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.sureBtnLoading = true;
          let province = v[0];
          let city = v[1];
          let area = v[2];
          http
            .post(`/adders/${this.user}`, {
              ...this.ruleForm,
              province: province,
              city: city,
              area: area,
            })
            .then(() => {
              this.sureBtnLoading = false;
              this.showEditDialog = false;
              this.$message({
                message: "数据添加成功",
                type: "success",
              });
              //重置表单
              this.$refs.ruleForm.resetFields();
              //事件，添加后刷新页面
              this.$emit("refresh");
            });
        }
      });
    },
  },
};
</script>

<style>
</style>